<template>
  <div>
    <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
    <r-table :tableHandles="tableHandles" :isSelection="false" :isIndex="true" :isPagination="true"
      :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" :isHandle="true" @refresh="init()">

    </r-table>
    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm"
      labelWidth="200px" dialogWidth="800px" :isHandle="true" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        btType: '',
      },
      searchForm: [
        {
          type: 'select',
          prop: 'btType',
          placeholder: '电池类型',
          width: 150,
          options: [
            { label: '48V', value: '48' },
            { label: '60V', value: '60' },
            { label: '72V', value: '72' },
          ]
        },
        // {
        //   type: 'input',
        //   prop: 'name',
        //   placeholder: '更换次数',
        //   width: 150
        // },
      ],
      searchHandle: [
        {
          label: '搜索',
          type: 'success',
          icon: 'el-icon-search',
          handle: e => this.init()
        }
      ],

      tableHandles: [
        {
          label: "新增套餐",
          type: "primary",
          handle: e => this.elFormVisible()
        }
      ],
      tableData: [{}],
      tableCols: [
        // {
        //   label: '序号',
        //   prop: 'name',
        // },
        {
          label: '换电套餐名',
          prop: 'mealName',
        },
        {
          label: '套餐费用',
          prop: 'price',
        },
        {
          label: '有效时长',
          prop: 'days'
        },
        {
          label: '更换次数',
          prop: 'excNum'
        },
        {
          label: '电池类型',
          prop: 'btType'
        },
        {
          label: '更新时间',
          prop: 'ctime'
        },
        {
          label: '启用状态',
          type: "switch",
          prop: 'status',
          values: [1, 2],
          change: (row) => this.changestate(row)
        },

        {
          label: '操作',
          type: "button",
          width: 300,
          btnList: [
            {
              label: '编辑',
              type: 'primary',
              handle: (row) => this.elFormDetail(row)
            },
            {
              label: '删除',
              type: 'primary',
              handle: (row) => this.del(row)
            },

          ]
        }

      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        mealName: "",
        days: "",
        btType: "",
        num: "",
        price: ''
      },
      formCols: [
        // {
        //   type: "select", label: "套餐名称", width: 350, prop: "mealName", options: [
        //     { label: '60V月租', value: '60V月租' },
        //     { label: '测试', value: '测试' },
        //     { label: '30天', value: '30天' },
        //     { label: '20天', value: '20天' },
        //     { label: '15天', value: '15天' }
        //   ]
        // },
        { type: "input", label: "套餐名称", width: 350, prop: "mealName" },
        // { type: "select", label: "套餐类型", width: 350, prop: "name" },
        { type: "input", label: "套餐时长", width: 350, prop: "days" },
        // { type: "select", label: "单位", width: 350, prop: "name" },
        {
          type: "select", label: "电池类型", width: 350, prop: "btType", options: [
            { label: '48V', value: '48' },
            { label: '60V', value: '60' },
            { label: '72V', value: '72' },
          ]
        },
        { type: "input", label: "次数", width: 350, prop: "num" },
        { type: "input", label: "套餐费用", width: 350, prop: "price", remark: '元' },
      ],
      formRules: {
        mealName: [
          { required: true, message: '请输入套餐名称', trigger: 'blur' },
        ],
        days: [
          { required: true, message: '请输入套餐金额', trigger: 'blur' },
        ],
        btType: [
          { required: true, message: '请输入套餐金额', trigger: 'blur' },
        ],
        num: [
          { required: true, message: '请输入套餐金额', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入套餐金额', trigger: 'blur' },
        ],
      },
      formHandle: [
        {
          label: "取消",
          handle: e => this.elFormVisible(),
        },
        {
          label: "确定",
          type: "success",
          handle: e => this.elFormSubmit(),
        },

      ],


    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
    // this.batteryTypeList();
  },
  methods: {
    async init() {
      let parm = {
        ...this.searchData, ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      }
      let res = await this.apis.mealExchange_list(parm)
      if (res) {
        this.tableData = res.rows || []
        this.tablePage.total = res.total
      }
    },
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.formData.id) {
            const res = await this.apis.mealExchange_updata({ ...this.formData });
          } else {
            const res = await this.apis.mealExchange_save({ ...this.formData });
          }


          this.init();
          this.elFormVisible()
        }
      })
    },
    async changestate(row) {
      const res = await this.apis.mealExchange_updata({
        id: row.id,
        status: row.status
      });
      this.$message({
        message: '操作成功！',
        type: 'success'
      });
    },
    elFormDetail(row) {
      console.log(row);
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key]
      })
      this.formData.id = row.id;
      this.elFormVisible()
    },
    del(row) {
      this.$confirm(`删除当前这条数据`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.apis.mealExchange_del({
          id: row.id
        });

        this.init();

        this.$message({
          message: '操作成功！',
          type: 'success'
        });

      })
    },
    async batteryTypeList() {
      const res = await this.apis.batteryTypeList({
        pageNum: 1,
        pageSize: 100000,
        commonType: 1
      });
      let list = res.rows || [];
      const res2 = await this.apis.batteryTypeList({
        pageNum: 1,
        pageSize: 100000,
        commonType: 2
      });
      const list2 = res.rows || [];
      list = list.concat(list2);
      let options = [];
      list.map(res => {
        options.push({
          value: res.id,
          label: res.typeName
        });
      });

      this.searchForm[this.labIndex2(this.searchForm, 'btType')].options = options;
      this.formCols[this.labIndex2(this.formCols, 'btType')].options = options;
    },
  }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
